home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / Forms Misc / selection-box.izs < prev    next >
Text File  |  2005-09-28  |  7KB  |  280 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Selection Box 
  4.  
  5. <!/TITLE>
  6.  
  7. <!DESCRIPTION>Copy items from one selection box to a second selection box. Selected item values are stored as a string for further manipulation, such as submitted through a form, an alert box, etc. <!/DESCRIPTION> 
  8.  
  9. <!CATEGORY>Forms<!/CATEGORY>
  10.  
  11. <!SCRIPT>
  12. <!-- START OF SCRIPT -->
  13.  
  14. <!-- HOW TO INSTALL SELECTION BOX:
  15.  
  16.   1.  Copy code into the HEAD section of document
  17.   2.  Put last coding into the BODY section of document  -->
  18.  
  19. <!-- STEP ONE: Add code into HEAD section of document  -->
  20.  
  21. <HEAD>
  22.  
  23. <SCRIPT LANGUAGE="JavaScript">
  24. <!-- Original:  Kathi O'Shea (Kathi.O'Shea@internet.com) -->
  25. <!-- Web Site:  http://www.web-savant.com/users/kathi/asp -->
  26.  
  27.  
  28.  
  29. <!-- Begin
  30. function moveOver()  
  31. {
  32. var boxLength = document.choiceForm.choiceBox.length;
  33. var selectedItem = document.choiceForm.available.selectedIndex;
  34. var selectedText = document.choiceForm.available.options[selectedItem].text;
  35. var selectedValue = document.choiceForm.available.options[selectedItem].value;
  36. var i;
  37. var isNew = true;
  38. if (boxLength != 0) {
  39. for (i = 0; i < boxLength; i++) {
  40. thisitem = document.choiceForm.choiceBox.options[i].text;
  41. if (thisitem == selectedText) {
  42. isNew = false;
  43. break;
  44.       }
  45.    }
  46. } 
  47. if (isNew) {
  48. newoption = new Option(selectedText, selectedValue, false, false);
  49. document.choiceForm.choiceBox.options[boxLength] = newoption;
  50. }
  51. document.choiceForm.available.selectedIndex=-1;
  52. }
  53. function removeMe() {
  54. var boxLength = document.choiceForm.choiceBox.length;
  55. arrSelected = new Array();
  56. var count = 0;
  57. for (i = 0; i < boxLength; i++) {
  58. if (document.choiceForm.choiceBox.options[i].selected) {
  59. arrSelected[count] = document.choiceForm.choiceBox.options[i].value;
  60. }
  61. count++;
  62. }
  63. var x;
  64. for (i = 0; i < boxLength; i++) {
  65. for (x = 0; x < arrSelected.length; x++) {
  66. if (document.choiceForm.choiceBox.options[i].value == arrSelected[x]) {
  67. document.choiceForm.choiceBox.options[i] = null;
  68.    }
  69. }
  70. boxLength = document.choiceForm.choiceBox.length;
  71.    }
  72. }
  73. function saveMe() {
  74. var strValues = "";
  75. var boxLength = document.choiceForm.choiceBox.length;
  76. var count = 0;
  77. if (boxLength != 0) {
  78. for (i = 0; i < boxLength; i++) {
  79. if (count == 0) {
  80. strValues = document.choiceForm.choiceBox.options[i].value;
  81. }
  82. else {
  83. strValues = strValues + "," + document.choiceForm.choiceBox.options[i].value;
  84. }
  85. count++;
  86.    }
  87. }
  88. if (strValues.length == 0) {
  89. alert("You have not made any selections");
  90. }
  91. else {
  92. alert("Here are the values you've selected:\r\n" + strValues);
  93.    }
  94. }
  95. //  End -->
  96. </script>
  97. </HEAD>
  98.  
  99. <!-- STEP TWO: Add code into BODY section of document  -->
  100.  
  101. <BODY>
  102.  
  103. <center>
  104. <form name="choiceForm">
  105. <table border=0>
  106. <tr>
  107. <td valign="top" width=175>
  108. Available Content:
  109. <br>
  110. <select name="available" size=10 onchange="moveOver();">
  111. <option value=1>Company News
  112. <option value=2>Industry News
  113. <option value=3>Product Updates
  114. <option value=4>Product Specifications
  115. <option value=5>Order History
  116. <option value=6>Order Status
  117. <option value=7>Contacts
  118. <option value=8>Calendar of Events
  119. <option value=9>Scheduler
  120. <option value=10>Notes
  121. </select>
  122. </td>
  123. <td valign="top">
  124. Your Choices:
  125. <br>
  126. <select multiple name="choiceBox" style="width:150;" size="10">
  127. </select>
  128. </td>
  129. </tr>
  130. <tr>
  131. <td colspan=2 height=10>
  132. <input type="button" value="Remove" onclick="removeMe();">
  133. <input type="button" value="Get Selected Values" onclick="saveMe();">
  134. </td>
  135. </tr>
  136. </table>
  137. </form>
  138. </center>
  139.  
  140.  
  141.  
  142. <!-- END OF SCRIPT -->
  143. <!/SCRIPT>
  144.  
  145. <!PREVIEW>
  146. <!-- START OF SCRIPT -->
  147.  
  148. <!-- HOW TO INSTALL SELECTION BOX:
  149.  
  150.   1.  Copy code into the HEAD section of document
  151.   2.  Put last coding into the BODY section of document  -->
  152.  
  153. <!-- STEP ONE: Add code into HEAD section of document  -->
  154.  
  155. <HEAD>
  156.  
  157. <SCRIPT LANGUAGE="JavaScript">
  158. <!-- Original:  Kathi O'Shea (Kathi.O'Shea@internet.com) -->
  159. <!-- Web Site:  http://www.web-savant.com/users/kathi/asp -->
  160.  
  161.  
  162.  
  163. <!-- Begin
  164. function moveOver()  
  165. {
  166. var boxLength = document.choiceForm.choiceBox.length;
  167. var selectedItem = document.choiceForm.available.selectedIndex;
  168. var selectedText = document.choiceForm.available.options[selectedItem].text;
  169. var selectedValue = document.choiceForm.available.options[selectedItem].value;
  170. var i;
  171. var isNew = true;
  172. if (boxLength != 0) {
  173. for (i = 0; i < boxLength; i++) {
  174. thisitem = document.choiceForm.choiceBox.options[i].text;
  175. if (thisitem == selectedText) {
  176. isNew = false;
  177. break;
  178.       }
  179.    }
  180. } 
  181. if (isNew) {
  182. newoption = new Option(selectedText, selectedValue, false, false);
  183. document.choiceForm.choiceBox.options[boxLength] = newoption;
  184. }
  185. document.choiceForm.available.selectedIndex=-1;
  186. }
  187. function removeMe() {
  188. var boxLength = document.choiceForm.choiceBox.length;
  189. arrSelected = new Array();
  190. var count = 0;
  191. for (i = 0; i < boxLength; i++) {
  192. if (document.choiceForm.choiceBox.options[i].selected) {
  193. arrSelected[count] = document.choiceForm.choiceBox.options[i].value;
  194. }
  195. count++;
  196. }
  197. var x;
  198. for (i = 0; i < boxLength; i++) {
  199. for (x = 0; x < arrSelected.length; x++) {
  200. if (document.choiceForm.choiceBox.options[i].value == arrSelected[x]) {
  201. document.choiceForm.choiceBox.options[i] = null;
  202.    }
  203. }
  204. boxLength = document.choiceForm.choiceBox.length;
  205.    }
  206. }
  207. function saveMe() {
  208. var strValues = "";
  209. var boxLength = document.choiceForm.choiceBox.length;
  210. var count = 0;
  211. if (boxLength != 0) {
  212. for (i = 0; i < boxLength; i++) {
  213. if (count == 0) {
  214. strValues = document.choiceForm.choiceBox.options[i].value;
  215. }
  216. else {
  217. strValues = strValues + "," + document.choiceForm.choiceBox.options[i].value;
  218. }
  219. count++;
  220.    }
  221. }
  222. if (strValues.length == 0) {
  223. alert("You have not made any selections");
  224. }
  225. else {
  226. alert("Here are the values you've selected:\r\n" + strValues);
  227.    }
  228. }
  229. //  End -->
  230. </script>
  231. </HEAD>
  232.  
  233. <!-- STEP TWO: Add code into BODY section of document  -->
  234.  
  235. <BODY>
  236.  
  237. <center>
  238. <form name="choiceForm">
  239. <table border=0>
  240. <tr>
  241. <td valign="top" width=175>
  242. Available Content:
  243. <br>
  244. <select name="available" size=10 onchange="moveOver();">
  245. <option value=1>Company News
  246. <option value=2>Industry News
  247. <option value=3>Product Updates
  248. <option value=4>Product Specifications
  249. <option value=5>Order History
  250. <option value=6>Order Status
  251. <option value=7>Contacts
  252. <option value=8>Calendar of Events
  253. <option value=9>Scheduler
  254. <option value=10>Notes
  255. </select>
  256. </td>
  257. <td valign="top">
  258. Your Choices:
  259. <br>
  260. <select multiple name="choiceBox" style="width:150;" size="10">
  261. </select>
  262. </td>
  263. </tr>
  264. <tr>
  265. <td colspan=2 height=10>
  266. <input type="button" value="Remove" onclick="removeMe();">
  267. <input type="button" value="Get Selected Values" onclick="saveMe();">
  268. </td>
  269. </tr>
  270. </table>
  271. </form>
  272. </center>
  273.  
  274.  
  275.  
  276. <!-- END OF SCRIPT -->
  277. <!/PREVIEW>
  278.  
  279. <!RELATED>NONE<!/RELATED>
  280.